<template>
  <div class="login">
    <!-- 登录 -->
    <!-- <el-icon :size="20">
    <Edit />-->
    <!-- </el-icon> -->
    <div class="form_box">
      <h2>用户登录</h2>
      <el-form :model="loginForm">
        <!-- 用户名 -->
        <el-form-item>
          <el-input :prefix-icon="UserFilled" v-model="loginForm.username" class="w-50 m-2" />
        </el-form-item>
        <!-- 密码  -->
        <el-form-item>
            <el-input :prefix-icon="Lock" :type="flag ? 'text':'password'"  v-model="loginForm.password">
                  <template #suffix>
                    <el-icon class="el-input__icon" v-show="!flag"><Hide @click="see"/></el-icon>
                    <el-icon class="el-input__icon" v-show="flag"><View @click="see"/></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-button type="primary" @click="dl">登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { UserFilled,Lock,Hide,View } from "@element-plus/icons-vue";
import {Login} from '@/utils/mixed.js'
import { ElMessage ,  } from 'element-plus'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import md5 from 'md5'
const router = useRouter();
const store = useStore();
const loginForm = reactive({
  username: "admin",
  password: "123456"
});
const flag = ref(false);
const see = () => {
    flag.value = !flag.value
}
const dl = async () => {
    var obj = { username:loginForm.username,password:md5(loginForm.password) }
    let data = await Login(obj);
    console.log(data);
    if(data.code == 200){
        ElMessage.success(data.message);
        store.commit('setToken',data.data.token)
        router.push('/');
    }
}
</script>
<style lang="scss" scoped>
.login{
    background: #2d3a4b;
    padding-top: 10%;
    .form_box{
        padding: 20px;
        // background: #fff;
        // border-radius: 3px;
        margin: auto;
        width: 35%;
        text-align: center;
        h2{
            color: #fff;
            margin-bottom: 25px;
        }
        ::v-deep .el-form-item{
            margin: 10px 0;
            border-radius: 3px;
            .el-input__wrapper{
                background: #283443;
            }
        }
        ::v-deep .el-input{
            width: 100%;
            font-size: 18px;
            margin: 10px 0;
             input{
                // border: 2px solid #3e4957;
                padding: 10px 15px;
                border-radius: 3px;
                height: 50px;
                width: 100%;
                box-sizing: border-box;
                font-size: 16px;
                color: #fff;
                background: #283443;
                border-right: none;
                border-left: none;
            }
        }
        ::v-deep .el-button{
            width: 100%;
            margin-top: 20px;
        }
    }
}
</style>